import React, { Component } from 'react';

import { audio_operate } from '../components/AudioPlayOperate'
import { Toast, Progress, Flex, ActivityIndicator } from 'antd-mobile';
import IconSkipNext from '../images/skip_next_black_48px.svg';
import IconPlay from '../images/play_arrow_black_48px.svg';
import IconPause from '../images/pause_black_48px.svg';
import IonPlayList from '../images/playlist_play_black_48px.svg';

import '../App.css';

// 底部播放器
class MiniMediaPlay extends Component {

    constructor(props, context) {
        super(props, context);
        let stateText = this.props.stateText
        let isOnline = this.props.isOnline
        let isPlaying = this.props.isPlaying
        let progress = this.props.progress
        let albumCoverUrl = this.props.albumCoverUrl

        this.fullScreen = this.fullScreen.bind(this)
        this.handlePlayOrPause = this.handlePlayOrPause.bind(this)
        this.handlePlayNext = this.handlePlayNext.bind(this)
        this.handlePlayList = this.handlePlayList.bind(this)

        this.state = {
            stateText: stateText,
            isOnline: isOnline,
            isPlaying: isPlaying,
            progress: progress,
            albumCoverUrl: albumCoverUrl,
        }
    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.isPlaying !== this.state.isPlaying) {
            this.setState({
                isPlaying: nextProps.isPlaying,
            });
        }
        if (nextProps.progress !== this.state.progress) {
            this.setState({
                progress: nextProps.progress,
            });
        }

        if (nextProps.stateText !== this.state.stateText) {
            this.setState({
                stateText: nextProps.stateText,
            });
        }

        if (nextProps.isOnline !== this.state.isOnline) {
            this.setState({
                isOnline: nextProps.isOnline,
            });
        }

        if (nextProps.albumCoverUrl !== this.state.albumCoverUrl) {
            this.setState({
                albumCoverUrl: nextProps.albumCoverUrl,
            });
        }
    }

    fullScreen() {
        this.props.fullScreen()
    }

    // 弹出提示信息
    makeToast(msg) {
        Toast.offline(msg, 2, false)
    }

    // 播放或暂停
    handlePlayOrPause() {
        if (!this.state.isOnline) {
            this.makeToast('设备不在线')
            return
        }
        this.props.executeCommand({ type: audio_operate.play_pause })
    }

    // 播放下一首
    handlePlayNext() {
        if (!this.state.isOnline) {
            this.makeToast('设备不在线')
            return
        }
        this.props.executeCommand({ type: audio_operate.next })
    }

    // 点击播放列表
    handlePlayList() {
        if (!this.state.isOnline) {
            this.makeToast('设备不在线')
            return
        }
        this.props.executeCommand({ type: audio_operate.play_list })
    }

    render() {
        let anima = "App-logo-stop"
        let flag = this.state.isOnline && this.state.albumCoverUrl !== ''
        if (flag && this.state.isPlaying) {
            anima = "App-logo"
        }

        let stateIsNull = (this.state.isOnline === null)

        return (
            <div style={styles.card}>
                <div style={styles.details}>
                    <div style={styles.content} onClick={this.fullScreen}>
                        {
                            flag === true &&
                            <div style={styles.content_div}>
                                <img
                                    className={anima}
                                    src={this.state.albumCoverUrl}
                                    style={styles.content_div_img}
                                    alt='' />
                            </div>
                        }
                        <div style={styles.content_info}>
                            {
                                stateIsNull ? <div style={{ display: "flex", justifyContent: "start", height: itemHeight }}>
                                    <ActivityIndicator text="正在获取设备状态" />
                                </div> :
                                    <p style={{
                                        width: quotiety - 60,
                                        marginRight: 16,
                                        color: "#616161",
                                        fontSize: '15px',
                                        marginTop: flag === true ? 10 : 16,
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }}>{this.state.stateText}</p>
                            }

                            <Progress
                                percent={this.state.progress}
                                position="normal"
                                unfilled={true}
                                appearTransition={false}
                                style={{ visibility: flag === true ? 'visible' : 'hidden', width: quotiety - 80, marginTop: '5px', marginRight: 16 }} />
                        </div>
                    </div>

                    <div style={styles.controls}>
                        <Flex>
                            <Flex.Item >
                                <div style={styles.div_item}>
                                    <img src={this.state.isPlaying ? IconPause : IconPlay} style={styles.playIcon} onClick={this.handlePlayOrPause} alt='' />
                                </div>
                            </Flex.Item>

                            <Flex.Item>
                                <div style={styles.div_item}>
                                    <img src={IconSkipNext} style={styles.nextIcon} onClick={this.handlePlayNext} alt='' />
                                </div>
                            </Flex.Item>

                            <Flex.Item>
                                <div style={styles.div_item}>
                                    <img src={IonPlayList} style={styles.nextIcon} onClick={this.handlePlayList} alt='' />
                                </div>
                            </Flex.Item>
                        </Flex>

                    </div>
                </div>
            </div>
        );
    }
}

export default MiniMediaPlay;


const quotiety = document.documentElement.clientWidth * 0.6
const itemHeight = 54
const styles = {
    card: {
        display: 'inline-block',
        position: 'fixed',
        bottom: 0,
        width: '100%',
        height: itemHeight,
        background: '#F5F5F5',
        boxShadow: '2px 1px 5px #858585',
    },
    details: {
        display: 'flex',
        flexDirection: 'row',
    },
    content: {
        width: quotiety,
        display: 'flex',
    },
    content_div: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: itemHeight,
        height: itemHeight,
    },

    content_div_img: {
        height: '40px',
        width: '40px',
        borderRadius: '50%'
    },

    content_info: {
        width: quotiety - itemHeight,
        marginLeft: 5,
    },
    controls: {
        flex: '1 0 auto',
        height: itemHeight,
        marginLeft: 10,
    },
    playIcon: {
        height: 36,
        width: 36,
        marginRight: 4,
    },

    nextIcon: {
        height: 30,
        width: 30,
        marginRight: 4,
    },

    div_item: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: itemHeight,
    },
}